<template>
  <div class="route-info">
    <el-descriptions :column="1" border class="info-descriptions">
      <el-descriptions-item>
        <template #label>
          <div class="info-label">
            <span>货物单号</span>
          </div>
        </template>
        <div class="info-value">{{ shipmentInfo.number_no || '-' }}</div>
      </el-descriptions-item>
      
      <el-descriptions-item>
        <template #label>
          <div class="info-label">
            <span>设备号</span>
          </div>
        </template>
        <div class="info-value">{{ shipmentInfo.mac_id || '-' }}</div>
      </el-descriptions-item>
      
      <el-descriptions-item>
        <template #label>
          <div class="info-label">
            <span>取货仓库</span>
          </div>
        </template>
        <div class="info-value pickup-warehouse">{{ shipmentInfo.pickup_warehouse || '-' }}</div>
      </el-descriptions-item>
      
      <el-descriptions-item>
        <template #label>
          <div class="info-label">
            <span>卸货仓库</span>
          </div>
        </template>
        <div class="info-value delivery-warehouse">{{ shipmentInfo.delivery_warehouse || '-' }}</div>
      </el-descriptions-item>
      
      <el-descriptions-item>
        <template #label>
          <div class="info-label">
            <span>状态</span>
          </div>
        </template>
        <div class="info-value">
          <el-tag v-if="shipmentInfo.status === 0" type="info" effect="light">未开始</el-tag>
          <el-tag v-else-if="shipmentInfo.status === 10" type="warning" effect="light">进行中</el-tag>
          <el-tag v-else-if="shipmentInfo.status === 30" type="success" effect="light">已完成</el-tag>
          <el-tag v-else-if="shipmentInfo.status === -10" type="danger" effect="light">异常</el-tag>
          <el-tag v-else type="info" effect="light">未知</el-tag>
        </div>
      </el-descriptions-item>
      
      <el-descriptions-item v-if="shipmentInfo.start_time">
        <template #label>
          <div class="info-label">
            <span>开始时间</span>
          </div>
        </template>
        <div class="info-value">{{ formatDate(shipmentInfo.start_time) || '-' }}</div>
      </el-descriptions-item>
      
      <el-descriptions-item v-if="shipmentInfo.end_time">
        <template #label>
          <div class="info-label">
            <span>结束时间</span>
          </div>
        </template>
        <div class="info-value">{{ formatDate(shipmentInfo.end_time) || '-' }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  shipmentInfo: {
    type: Object,
    default: () => ({})
  }
})

// 日期格式化函数
function formatDate(dateString) {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
}
</script>

<style lang="scss" scoped>
.route-info {
  .info-descriptions {
    :deep(.el-descriptions__label) {
      width: 120px;
      background: #f5f7fa;
      font-weight: 500;
    }
    
    :deep(.el-descriptions__content) {
      background: #fff;
    }
  }
  
  .info-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #606266;
  }
  
  .info-value {
    color: #303133;
    
    &.pickup-warehouse {
      color: #67c23a;
    }
    
    &.delivery-warehouse {
      color: #e6a23c;
    }
  }
}
</style>